<template>
    <div>
        <FYNavBar title="地址列表"></FYNavBar>
        <van-address-list
                v-model="chosenAddressId"
                :list="list"
                :disabled-list="disabledList"
                disabled-text="以下地址超出配送范围"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
                @select="Select"
        />
    </div>
</template>

<script>
import {showToast} from "vant";
import {ref} from "vue";
import FYNavBar from "@/components/common/FYNavBar.vue";
import Address from "@/utils/address";

export default {
    name: "FYAddressList",
    components: {FYNavBar},
    setup() {

        const onAdd = () => showToast('新增地址');
        const onEdit = (item, index) => showToast('编辑地址:' + index);

        let disabledList;
        return {
            onAdd,
            onEdit,
            disabledList,
        };
    },
    data() {
        return{
            list: [],
            chosenAddressId: '1'
        }
    },
    methods: {
        onAdd() {
            this.$router.push('/address/add')
        },
        onEdit(item, index) {
            console.log(index)
            this.$store.commit('setEditingAddress', item)
            this.$router.push('/address/edit')
        },
        Select(item, index){
            // this.$http.put()
            this.$store.commit('setSelectedAddress', item);
            this.$router.back();
        }
    },
    mounted() {
        this.$http.get(`address`).then(resp => {
            console.log(resp)
            let addressList = resp.data
            for (let index = 0; index < addressList.length; index++){
                const address = addressList[index]
                if(address.is_default){
                    this.chosenAddressId = address.id
                }
                addressList[index] = Address.convertToFront(address)
            }
            console.log(resp)
            this.list = addressList

            const  selectedAddress = this.$store.state.selectedAddress;
            if(selectedAddress){
                this.chosenAddressId = selectedAddress.id
            }
        })



    }

}
</script>

<style scoped>

</style>
